<script lang="ts">
  import Tag from "./Tag.svelte";
  import Timeline from "./Timeline.svelte";

  interface ServiceDetail {
    serviceName: string; // 服务标题
    createTime: string; // 发起时间
    userName: string; // 用户名称
    phone: string; // 用户电话
    address: string; // 用户地址
    appointTime: string; // 预约时间
    status: string; // 服务状态
    evaluation: string; // 服务评价
    description: string; // 服务描述
  }

  // 模拟数据
  const detail: ServiceDetail = {
    serviceName: "[游家浜社区]XXX用户发起理发服务需求",
    createTime: "2024.10.08 17:31",
    userName: "张夏铭",
    phone: "13344556688",
    address: "温江区政和街666号1栋1单元25楼4号",
    appointTime: "2024.10.10 09:00-11:00",
    status: "已服务",
    evaluation: "满意",
    description: "描述文字描述文字描述文字描述文字描述文字",
  };

  // 处置流程数据
  const timeline = [
    {
      time: "2024.10.08 17:31",
      content: "[游家浜社区]XXX用户发起理发服务需求",
      operator: "发起人：张晓明",
    },
    {
      time: "2024.10.08 17:31",
      content: "社区人员 XXX 完成流程处理",
    },
    {
      time: "2024.10.08 17:59",
      content: "服务人员 XXX完成接单处理",
    },
    {
      time: "2024.10.08 17:59",
      content: "服务人员 XXX完成服务",
    },
    {
      time: "2024.10.08 17:59",
      content: "服务人员 XXX完成服务",
    },
    {
      time: "2024.10.08 17:59",
      content: "服务人员 XXX完成服务",
    },
    {
      time: "2024.10.08 17:59",
      content: "服务人员 XXX完成服务",
    },
  ];
</script>

<div class="dialog-detail">
  <div class="grid grid-cols-2 gap-6 mt-4">
    <!-- 左侧事件详情 -->
    <div class="event-info p-6 bg-[#09142F] left-info">
      <div class="flex items-center text-base font-500 mb-6">
        <div class="radio"></div>
        事件详情
      </div>
      <div class="space-y-4">
        <div class="item">
          <span class="label">服务标题</span>
          <span>{detail.serviceName}</span>
        </div>
        <div class="item">
          <span class="label">发起时间</span>
          <span>{detail.createTime}</span>
        </div>
        <div class="item">
          <span class="label">用户名称</span>
          <span>{detail.userName}</span>
        </div>
        <div class="item">
          <span class="label">用户电话</span>
          <span>{detail.phone}</span>
        </div>
        <div class="item">
          <span class="label">用户地址</span>
          <span>{detail.address}</span>
        </div>
        <div class="item">
          <span class="label">预约时间</span>
          <span>{detail.appointTime}</span>
        </div>
        <div class="item">
          <span class="label">服务状态</span>
          <!-- <span class="status-tag">{detail.status}</span> -->
          <Tag
            borderColor="border-[#3DB937]"
            textColor="text-[#31B32B]"
            bgColor="bg-[rgba(43,105,2,0.3)]">{detail.status}</Tag
          >
        </div>
        <div class="item">
          <span class="label">服务评价</span>
          <Tag
            borderColor="border-[#3DB937]"
            textColor="text-[#31B32B]"
            bgColor="bg-[rgba(43,105,2,0.3)]">{detail.evaluation}</Tag
          >
        </div>
        <div class="item">
          <span class="label">服务描述</span>
          <span>{detail.description}</span>
        </div>
      </div>
    </div>

    <!-- 右侧处置流程 -->
    <div class="process-info p-6 bg-[#09142F]">
      <div class="flex items-center text-base font-500 mb-6">
        <div class="radio"></div>
        处置流程
      </div>
      <Timeline items={timeline} />
    </div>
  </div>
</div>

<style>
  .dialog-detail {
    color: white;
  }
  .radio {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #20fffd;
    margin-right: 0.5rem;
  }
  .left-info .item {
    background: rgba(0, 133, 255, 0.05);
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #d4e8f6;
  }
  .left-info .item .label {
    padding: 7px;
    font-weight: 500;
    color: #d4e8f6;
    background: rgba(26, 109, 195, 0.2);
    border-radius: 4px 4px 4px 4px;
  }
  .item {
    display: flex;
    gap: 1rem;
  }

  .label {
    color: #8b8b8b;
    min-width: 5rem;
  }

  .status-tag {
    color: #4caf50;
    padding: 2px 8px;
    border: 1px solid #4caf50;
    border-radius: 4px;
  }

  .evaluation-tag {
    color: #4caf50;
    padding: 2px 8px;
    border: 1px solid #4caf50;
    border-radius: 4px;
  }

  .timeline-item {
    position: relative;
    padding-left: 20px;
  }

  .timeline-dot {
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    background: #00b8d4;
    border-radius: 50%;
    margin-top: 6px;
  }

  .timeline-content {
    padding-left: 20px;
    border-left: 1px solid #00b8d4;
  }

  .time {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
</style>
